<script setup>
import { ref, onMounted } from 'vue'
import CommonHeader from '@/components/CommonHeader.vue'
import CommonFooter from '@/components/CommonFooter.vue'
import FloatingSidebar from '@/components/FloatingSidebar.vue'
import { addressInfoService, addressAddService, addressUpdateService, addressDeleteService, addressDefaultService } from '@/api/address.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserInfoStore from '@/stores/userInfo.js'

const userInfoStore = useUserInfoStore()
const activeCategory = ref('accountSecurity')

// 地址相关状态
const loading = ref(false)
const showAddAddressForm = ref(false)
const isEdit = ref(false)
const currentEditAddress = ref(null)


const settings = ref({
  accountSecurity: {
    twoFactorAuth: false,
    passwordReminder: true
  },
  shippingAddress: {
    address: []
  },
  paymentSettings: {},
  countryRegion: {
    selectedRegion: 'China'
  },
  generalSettings: {
    autoLogin: false
  },
  messageNotifications: {
    email: true,
    push: true
  },
  privacySettings: {
    dataCollection: true,
    personalizedAds: false
  },
  modeSwitch: {
    theme: 'light'
  },
  personalSkin: {
    skinColor: 'default'
  },
  merchantEntry: {},
  helpFeedback: {},
  aboutApp: {
    version: '1.0.0'
  }
})

// 地区
const regionOptions = [
  { label: '中国大陆', value: 'China' },
  { label: '香港特别行政区', value: 'HongKong' },
  { label: '美国', value: 'USA' },
  { label: '日本', value: 'Japan' }
]
// 模式切换
const themeOptions = [
  { label: '浅色模式', value: 'light' },
  { label: '深色模式', value: 'dark' }
]
// 皮肤
const skinOptions = [
  { label: '默认皮肤', value: 'default' },
  { label: '简约白', value: 'white' },
  { label: '科技蓝', value: 'blue' },
  { label: '活力橙', value: 'orange' }
]


// 新增地址表单
const newAddress = ref({
  contact: '',
  phone: '',
  province: '',
  city: '',
  town: '',
  street: '',
  notes: '',
  isDefault: false
})

// 获取地址列表
const getAddressList = async () => {
  loading.value = true
  const result = await addressInfoService(userInfoStore.info.id)

  settings.value.shippingAddress.address = result
  loading.value = false
}

// 设置默认地址
const setDefaultAddress = async (addressId) => {
  try {
    await addressDefaultService(addressId)
    ElMessage.success('设置默认地址成功')
    await getAddressList() 
  } catch (error) {
    ElMessage.error('设置默认地址失败')
  }
}

// 删除地址
const deleteAddress = async (addressId) => {
  try {
    await ElMessageBox.confirm('确定要删除这个地址吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await addressDeleteService(addressId)
    ElMessage.success('删除地址成功')
    await getAddressList() 
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除地址失败')
    }
  }
}

// 编辑地址
const editAddress = (address) => {
  isEdit.value = true
  currentEditAddress.value = address
  showAddAddressForm.value = true
  
  // 填充表单数据
  newAddress.value = {
    id: address.id,
    contact: address.contact,
    phone: address.phone || '',
    province: address.province,
    city: address.city,
    town: address.town,
    street: address.street,
    notes: address.notes || '',
    isDefault: address.isDefault
  }
}

// 添加新地址
const addNewAddress = async () => {
  // 表单验证
  if (!newAddress.value.contact.trim()) {
    ElMessage.error('请输入联系人姓名')
    return
  }
  
  if (!newAddress.value.street.trim()) {
    ElMessage.error('请输入详细地址')
    return
  }
  
  try {
    const addressData = {
      ...newAddress.value,
      userId: userInfoStore.info.id
    }
    
    if (isEdit.value) {
      // 编辑地址
      await addressUpdateService(addressData)
      ElMessage.success('地址更新成功')
    } else {
      // 添加新地址
      await addressAddService(addressData)
      ElMessage.success('地址添加成功')
    }
    
    showAddAddressForm.value = false
    resetAddressForm()
    await getAddressList() // 重新获取地址列表
  } catch (error) {
    console.error('保存地址失败:', error)
    ElMessage.error(isEdit.value ? '地址更新失败' : '地址添加失败')
  }
}

// 取消添加地址
const cancelAddAddress = () => {
  showAddAddressForm.value = false
  resetAddressForm()
}

// 重置地址表单
const resetAddressForm = () => {
  newAddress.value = {
    contact: '',
    phone: '',
    province: '',
    city: '',
    town: '',
    street: '',
    notes: '',
    isDefault: false
  }
  isEdit.value = false
  currentEditAddress.value = null
}

// 打开添加地址模态框
const openAddAddressModal = () => {
  isEdit.value = false
  showAddAddressForm.value = true
  resetAddressForm()
}

// 格式化地址显示
const formatAddress = (address) => {
  return `${address.province} ${address.city} ${address.town} ${address.street}`
}

// 格式化电话号码显示
const formatPhoneNumber = (phone) => {
  if (!phone) return ''
  // 移除所有非数字字符
  const cleaned = phone.replace(/\D/g, '')
  // 如果是11位手机号，格式化为 138-1234-5678
  if (cleaned.length === 11) {
    return `${cleaned.slice(0, 3)}-${cleaned.slice(3, 7)}-${cleaned.slice(7)}`
  }
  // 如果是其他长度，保持原样
  return phone
}

// 复制电话号码到剪贴板
const copyPhoneNumber = async (phone) => {
  try {
    await navigator.clipboard.writeText(phone)
    ElMessage.success('电话号码已复制到剪贴板')
  } catch (error) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = phone
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('电话号码已复制到剪贴板')
  }
}

const showPaymentDevTip = () => {
  ElMessageBox.alert(
    '该功能目前尚在开发阶段，尚未完成全部的构建与优化工作。我们正在对其进行深入的设计与调试，以确保其能够稳定、高效地运行。在正式发布之前，还需要经过多轮测试和不断完善，以达到最佳的用户体验。敬请期待后续进展。',
    '提示',
    {
      confirmButtonText: '我知道了',
      type: 'info',
      showClose: false,
    }
  )
}

// 生命周期
onMounted(() => {
  getAddressList()
})
</script>

<template>
  <div class="main-layout">
    <CommonHeader />
    <FloatingSidebar />
    <div class="settings-layout">
      <aside class="settings-sidebar">
        <div class="sidebar-section">
          <h3 class="section-title">账户与交易</h3>
          <ul>
            <li :class="{ active: activeCategory === 'accountSecurity' }" @click="activeCategory = 'accountSecurity'">账号与安全</li>
            <li :class="{ active: activeCategory === 'shippingAddress' }" @click="activeCategory = 'shippingAddress'">收货地址</li>
            <li :class="{ active: activeCategory === 'paymentSettings' }" @click="activeCategory = 'paymentSettings'">支付设置</li>
            <li :class="{ active: activeCategory === 'countryRegion' }" @click="activeCategory = 'countryRegion'">国家与地区</li>
          </ul>
        </div>
        <div class="sidebar-section">
          <h3 class="section-title">功能设置</h3>
          <ul>
            <li :class="{ active: activeCategory === 'generalSettings' }" @click="activeCategory = 'generalSettings'">通用设置</li>
            <li :class="{ active: activeCategory === 'messageNotifications' }" @click="activeCategory = 'messageNotifications'">消息通知</li>
            <li :class="{ active: activeCategory === 'privacySettings' }" @click="activeCategory = 'privacySettings'">隐私设置</li>
            <li :class="{ active: activeCategory === 'modeSwitch' }" @click="activeCategory = 'modeSwitch'">模式切换</li>
            <li :class="{ active: activeCategory === 'personalSkin' }" @click="activeCategory = 'personalSkin'">个性皮肤</li>
          </ul>
        </div>
        <div class="sidebar-section">
          <h3 class="section-title">关于我们</h3>
          <ul>
            <li :class="{ active: activeCategory === 'merchantEntry' }" @click="activeCategory = 'merchantEntry'">商家入驻</li>
            <li :class="{ active: activeCategory === 'helpFeedback' }" @click="activeCategory = 'helpFeedback'">帮助与反馈</li>
            <li :class="{ active: activeCategory === 'aboutApp' }" @click="activeCategory = 'aboutApp'">关于应用</li>
          </ul>
        </div>
      </aside>

      <main class="settings-content">
        <section v-if="activeCategory === 'accountSecurity'" class="settings-panel">
          <h2 class="panel-title">账号与安全</h2>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="twoFactorAuth">两步验证</label>
              <input type="checkbox" id="twoFactorAuth" v-model="settings.accountSecurity.twoFactorAuth" class="toggle-switch">
            </div>
            <p class="item-description">启用两步验证，为您的账户增加一层额外安全保护。</p>
          </div>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="passwordReminder">定期密码提醒</label>
              <input type="checkbox" id="passwordReminder" v-model="settings.accountSecurity.passwordReminder" class="toggle-switch">
            </div>
            <p class="item-description">开启后，系统会定期提醒您更新密码。</p>
          </div>
          <button class="action-button">修改密码</button>
        </section>

        <section v-if="activeCategory === 'shippingAddress'" class="settings-panel">
          <h2 class="panel-title">收货地址</h2>
          <p class="panel-description">管理您的收货地址，方便购物时快速选择。</p>
          
          <!-- 地址列表 -->
          <div class="address-list" v-loading="loading">
            <div v-if="settings.shippingAddress.address.length === 0" class="empty-address">
              <p>暂无收货地址</p>
            </div>
            
            <div 
              v-for="address in settings.shippingAddress.address" 
              :key="address.id" 
              class="address-item"
              :class="{ 'address-item-default': address.isDefault }"
            >
              <div class="address-info">
                <div class="address-header">
                  <span class="address-contact">{{ address.contact }}</span>
                  <div class="address-phone-container">
                    <span v-if="address.phone" class="address-phone" @click="copyPhoneNumber(address.phone)" title="点击复制电话号码">
                      <i class="phone-icon">📞</i>
                      <span class="phone-number">{{ formatPhoneNumber(address.phone) }}</span>
                    </span>
                    <span v-else class="address-phone-empty">
                      <i class="phone-icon-empty">📱</i>
                      <span>暂无手机号</span>
                    </span>
                  </div>
                </div>
                <div class="address-detail">{{ formatAddress(address) }}</div>
                <div v-if="address.notes" class="address-notes">备注：{{ address.notes }}</div>
              </div>
              <div class="address-actions">
                <button class="action-button mini-button" @click="editAddress(address)">编辑</button>
                <button class="action-button mini-button secondary" @click="deleteAddress(address.id)">删除</button>
                <button 
                  v-if="!address.isDefault" 
                  class="action-button mini-button address-default-btn tertiary" 
                  @click="setDefaultAddress(address.id)"
                >
                  设为默认
                </button>
                <button 
                  v-else 
                  class="action-button mini-button address-default-btn default-btn" 
                  disabled
                >
                  默认
                </button>
              </div>
            </div>
          </div>
          
          <button class="action-button add-address-button" @click="openAddAddressModal">添加新地址</button>
        </section>

        <section v-if="activeCategory === 'paymentSettings'" class="settings-panel">
          <h2 class="panel-title">支付设置</h2>
          <p class="panel-description">添加、编辑或删除您的支付方式，管理支付偏好。</p>
          <button class="action-button" @click="showPaymentDevTip">管理支付方式</button>
        </section>

        <section v-if="activeCategory === 'countryRegion'" class="settings-panel">
          <h2 class="panel-title">国家与地区</h2>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="selectRegion">当前国家/地区</label>
              <select id="selectRegion" v-model="settings.countryRegion.selectedRegion" class="select-style">
                <option v-for="option in regionOptions" :key="option.value" :value="option.value">
                  {{ option.label }}
                </option>
              </select>
            </div>
            <p class="item-description">选择您所在的国家或地区，以便提供更符合本地化的服务。</p>
          </div>
        </section>

        <section v-if="activeCategory === 'generalSettings'" class="settings-panel">
          <h2 class="panel-title">通用设置</h2>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="autoLogin">自动登录</label>
              <input type="checkbox" id="autoLogin" v-model="settings.generalSettings.autoLogin" class="toggle-switch">
            </div>
            <p class="item-description">下次访问时自动登录，无需再次输入账号密码。</p>
          </div>
        </section>

        <section v-if="activeCategory === 'messageNotifications'" class="settings-panel">
          <h2 class="panel-title">消息通知</h2>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="emailNotifications">邮件通知</label>
              <input type="checkbox" id="emailNotifications" v-model="settings.messageNotifications.email" class="toggle-switch">
            </div>
            <p class="item-description">接收重要通知和促销邮件。</p>
          </div>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="pushNotifications">推送通知</label>
              <input type="checkbox" id="pushNotifications" v-model="settings.messageNotifications.push" class="toggle-switch">
            </div>
            <p class="item-description">在设备上接收实时消息提醒。</p>
          </div>
        </section>

        <section v-if="activeCategory === 'privacySettings'" class="settings-panel">
          <h2 class="panel-title">隐私设置</h2>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="dataCollection">允许数据收集</label>
              <input type="checkbox" id="dataCollection" v-model="settings.privacySettings.dataCollection" class="toggle-switch">
            </div>
            <p class="item-description">帮助我们改进服务，您的数据将匿名处理。</p>
          </div>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="personalizedAds">个性化广告</label>
              <input type="checkbox" id="personalizedAds" v-model="settings.privacySettings.personalizedAds" class="toggle-switch">
            </div>
            <p class="item-description">根据您的兴趣展示相关广告。</p>
          </div>
        </section>

        <section v-if="activeCategory === 'modeSwitch'" class="settings-panel">
          <h2 class="panel-title">模式切换</h2>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="themeSwitch">主题模式</label>
              <select id="themeSwitch" v-model="settings.modeSwitch.theme" class="select-style">
                <option v-for="option in themeOptions" :key="option.value" :value="option.value">
                  {{ option.label }}
                </option>
              </select>
            </div>
            <p class="item-description">切换应用的显示模式，提供浅色和深色两种选择。</p>
          </div>
        </section>

        <section v-if="activeCategory === 'personalSkin'" class="settings-panel">
          <h2 class="panel-title">个性皮肤</h2>
          <div class="setting-item-group">
            <div class="setting-item">
              <label for="skinColor">选择皮肤颜色</label>
              <select id="skinColor" v-model="settings.personalSkin.skinColor" class="select-style">
                <option v-for="option in skinOptions" :key="option.value" :value="option.value">
                  {{ option.label }}
                </option>
              </select>
            </div>
            <p class="item-description">自定义应用界面的主题颜色。</p>
          </div>
        </section>

        <section v-if="activeCategory === 'merchantEntry'" class="settings-panel">
          <h2 class="panel-title">商家入驻</h2>
          <p class="panel-description">如果您希望在我们的平台开设店铺，请点击下方按钮提交入驻申请。</p>
          <button class="action-button">申请入驻</button>
        </section>

        <section v-if="activeCategory === 'helpFeedback'" class="settings-panel">
          <h2 class="panel-title">帮助与反馈</h2>
          <p class="panel-description">遇到问题或有任何建议？请联系我们的客服团队，或提交您的反馈。</p>
          <button class="action-button">联系客服</button>
          <button class="action-button secondary">提交反馈</button>
        </section>

        <section v-if="activeCategory === 'aboutApp'" class="settings-panel">
          <h2 class="panel-title">关于应用</h2>
          <p class="panel-description">当前版本: {{ settings.aboutApp.version }}</p>
          <p class="item-description">Pardo Mall 致力于为您提供优质的购物体验。</p>
          <button class="action-button">查看用户协议</button>
          <button class="action-button secondary">查看隐私政策</button>
        </section>
      </main>
    </div>

    <!-- 添加/编辑地址模态框 -->
    <div v-if="showAddAddressForm" class="modal-overlay" @click="cancelAddAddress">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ isEdit ? '编辑地址' : '添加新地址' }}</h3>
          <button class="close-button" @click="cancelAddAddress">&times;</button>
        </div>
        
        <div class="modal-body">
          <div class="form-group">
            <label>联系人姓名 *</label>
            <input 
              type="text" 
              v-model="newAddress.contact" 
              class="form-input" 
              placeholder="请输入联系人姓名"
              maxlength="20"
            >
          </div>
          
          <div class="form-group">
            <label>手机号码 *</label>
            <input 
              type="tel" 
              v-model="newAddress.phone" 
              class="form-input" 
              placeholder="请输入手机号码"
              maxlength="11"
            >
          </div>
          
          <div class="form-group">
            <label>省份</label>
            <input 
              type="text" 
              v-model="newAddress.province" 
              class="form-input" 
              placeholder="请输入省份"
            >
          </div>
          
          <div class="form-group">
            <label>城市</label>
            <input 
              type="text" 
              v-model="newAddress.city" 
              class="form-input" 
              placeholder="请输入城市"
            >
          </div>
          
          <div class="form-group">
            <label>区县</label>
            <input 
              type="text" 
              v-model="newAddress.town" 
              class="form-input" 
              placeholder="请输入区县"
            >
          </div>
          
          <div class="form-group">
            <label>详细地址 *</label>
            <textarea 
              v-model="newAddress.street" 
              class="form-input" 
              placeholder="请输入详细地址，如街道、门牌号等"
              rows="3"
              maxlength="100"
            ></textarea>
          </div>
          
          <div class="form-group">
            <label>备注</label>
            <input 
              type="text" 
              v-model="newAddress.notes" 
              class="form-input" 
              placeholder="选填，如公司、学校等"
              maxlength="50"
            >
          </div>
          
          <div class="form-group">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="newAddress.isDefault"
              >
              设为默认收货地址
            </label>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="action-button secondary" @click="cancelAddAddress">取消</button>
          <button class="action-button" @click="addNewAddress">
            {{ isEdit ? '保存' : '添加' }}
          </button>
        </div>
      </div>
    </div>

    <CommonFooter />
  </div>
</template>

<style scoped>
.settings-layout {
  display: flex;
  max-width: 1200px;
  margin: 40px auto;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

.settings-sidebar {
  width: 280px;
  background-color: #f8fafd;
  padding: 30px 0;
  border-right: 1px solid #eef2f7;
}

.sidebar-section {
  margin-bottom: 35px;
}

.section-title {
  font-size: 15px;
  color: #6a7c8a;
  padding: 0 30px 15px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid #e0e6ed;
  margin-bottom: 15px;
  font-weight: 700;
}

.sidebar-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-section li {
  padding: 14px 30px;
  color: #4a5d6f;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-left: 4px solid transparent; /* For active indicator */
}

.sidebar-section li:hover {
  background-color: #e6f0fa;
  color: #007bff;
}

.sidebar-section li.active {
  background-color: #e6f0fa;
  color: #007bff;
  font-weight: 600;
  border-left-color: #007bff;
}

.settings-content {
  flex-grow: 1;
  padding: 40px;
  background-color: #ffffff;
}

.settings-panel {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.panel-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
}

.panel-description {
  font-size: 15px;
  color: #777;
  margin-bottom: 25px;
  line-height: 1.6;
}

.setting-item-group {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item-group:last-of-type {
  border-bottom: none;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.setting-item label {
  font-size: 17px;
  color: #444;
  flex-grow: 1;
  cursor: pointer;
}

.item-description {
  font-size: 13px;
  color: #999;
  margin-top: 8px;
  padding-left: 2px;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 28px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #e0e0e0;
  border-radius: 14px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toggle-switch:checked {
  background-color: #007bff;
}

.toggle-switch::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: white;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.toggle-switch:checked::before {
  transform: translateX(20px);
}

.select-style {
  padding: 10px 15px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 15px;
  color: #555;
  background-color: white;
  cursor: pointer;
  min-width: 150px;
  appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}

.select-style:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.action-button {
  background-color: #007bff;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.1s ease;
  margin-right: 15px;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
}

.action-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

.action-button.secondary {
  background-color: #6c757d;
  box-shadow: 0 2px 5px rgba(108, 117, 125, 0.2);
}

.action-button.secondary:hover {
  background-color: #5a6268;
}

.mini-button {
  padding: 6px 12px;
  font-size: 14px;
  margin-left: 10px;
}

.mini-button.tertiary {
  background-color: #28a745;
  box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2);
  width: 90px;
  text-align: center;
}

.mini-button.tertiary:hover {
  background-color: #218838;
}

.address-list {
  margin-top: 20px;
  margin-bottom: 30px;
  border: none;
  border-radius: 12px;
  background: none;
}

.empty-address {
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 16px;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  margin-bottom: 18px;
  padding: 28px 32px;
  transition: box-shadow 0.2s;
  position: relative;
}

.address-item-default {
  background: #f3f8ff;
  border-left: 4px solid #409eff;
}

.address-info {
  flex: 1;
  min-width: 0;
}

.address-header {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.address-contact {
  font-weight: 700;
}

.address-phone-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.address-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #e1f5fe;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.address-phone::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.address-phone:hover::before {
  left: 100%;
}

.address-phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
  border-color: #2196f3;
}

.address-phone:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

.phone-icon {
  font-size: 14px;
  color: #2196f3;
  animation: pulse 2s infinite;
  filter: drop-shadow(0 1px 2px rgba(33, 150, 243, 0.3));
}

.phone-number {
  font-size: 14px;
  font-weight: 500;
  color: #1976d2;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.address-phone-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f5f5f5;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  opacity: 0.7;
}

.phone-icon-empty {
  font-size: 14px;
  color: #9e9e9e;
}

.address-phone-empty span {
  font-size: 14px;
  color: #9e9e9e;
  font-style: italic;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.address-detail {
  font-size: 15px;
  color: #555;
  margin-bottom: 6px;
}

.address-notes {
  font-size: 13px;
  color: #888;
  background: #f5f7fa;
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: 6px;
  display: inline-block;
}

.address-actions {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: center;
}

.action-button.mini-button.default-btn {
  background: #e0e0e0;
  color: #888;
  cursor: not-allowed;
  border: none;
  box-shadow: none;
}

.action-button.mini-button.tertiary {
  background: #4caf50;
  color: #fff;
}

.action-button.mini-button.tertiary:hover {
  background: #388e3c;
}

.add-address-button {
  width: auto;
  margin-top: 20px;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e0e6ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.close-button:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e0e6ed;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Form Styles */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 15px;
  color: #333;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings-layout {
    flex-direction: column;
    margin: 20px;
  }
  
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #eef2f7;
  }
  
  .settings-content {
    padding: 20px;
  }
  
  .address-item {
    flex-direction: column;
    gap: 15px;
  }
  
  .address-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .modal-content {
    width: 95%;
    margin: 20px;
  }
  
  .address-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .address-phone-container {
    align-self: flex-start;
  }
  
  .address-phone,
  .address-phone-empty {
    padding: 4px 10px;
    font-size: 13px;
  }
  
  .phone-icon,
  .phone-icon-empty {
    font-size: 12px;
  }
  
  .phone-number {
    font-size: 13px;
  }
}

.address-default-btn {
  min-width: 88px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
</style>
